<template>
  <div class="tabs-content">
    <div class="tabs-tab-pane">
      <div class="g-row" v-if="bigItem && bigItem.name">
        <div>
          <big-rectangle :link="'/' + type + '/detail'" :width="bigWidth" :item="bigItem"/>
        </div>
        <div class="g-row-right" :style="'width: ' + rowRightWidth">
          <rectangle :link="'/' + type + '/detail'" v-for="(item, index) in contentList" :item="item" :width="width" :is-box-bottom="false" :key="item.id" :row-first-item="index !== 0 && rowItemNum - 1 !== 0 && index % (rowItemNum - 1) === 0"/>
        </div>
      </div>
      <el-empty style="background: #ffffff;border-radius: 4px;margin: 0 10px;" v-else/>
    </div>
  </div>
</template>

<script>
  import bigRectangle from "./bigRectangle";
  import rectangle from "./rectangle";
  import {nextTick, ref, watch} from "vue";
  export default {
    name: "tabsContent",
    components: {
      rectangle,
      bigRectangle
    },
    props: {
      itemList: {
        type: Array,
        required: true
      },
      type: {
        type: String,
        default: "learn"
      }
    },
    setup(props) {
      let bigItem = {}
      const contentList = ref([])
      const load = function() {
        for (let i = 0; i < props.itemList.length; i++) {
          const item = props.itemList[i];
          if (i === 0) {
            bigItem = item;
          } else {
            contentList.value.push(item);
          }
        }
      }
      load()
      const bigWidth = ref("")
      const width = ref("")
      const calcWidth = () => {
        let clientWidth = document.body.clientWidth;
        if (clientWidth > 1400) {
          clientWidth = 1400;
        }
        if (clientWidth < 1300) {
          clientWidth = 1300;
        }
        const mWidth = 180;
        for (let i = 2;; i++) {
          const totalWidth = 100 + mWidth * i
          if (clientWidth < totalWidth) {
            return 1;
          } else if (totalWidth <= clientWidth && clientWidth < totalWidth + mWidth) {
            return i - 2 || 1;
          }
        }
      }
      // 显示多少行
      const showRowNum = 2
      // 每行多少数量
      const rowItemNum = ref(1)
      let pageNum = 0;
      const change = () => {
        if (props.itemList && props.itemList.length) {
          const pageSize = (rowItemNum.value - 1) * showRowNum;
          const start = pageNum * pageSize + 1;
          let end = (pageNum + 1) * pageSize + 1;
          if (end >= props.itemList.length) {
            end = props.itemList.length;
            pageNum = 0
          } else {
            pageNum++;
          }
          contentList.value = props.itemList.slice(start, end);
        }
      }
      const rowRightWidth = ref("50%")
      nextTick(function() {
        const x = 10 * 2;
        let num = calcWidth()
        if (num === 1) {
          num = 2
        }
        rowItemNum.value = num
        const bigS = x;
        bigWidth.value = "calc(" + 100 / num + "% - " + bigS + "px)";
        rowRightWidth.value = 100 - 100 /num + "%";
        width.value = "calc(" + 100 / (num - 1) + "% - " + x + "px)"
        window.addEventListener("resize", () => {
          let num = calcWidth();
          if (num === 1) {
            num = 2
          }
          const x = 10 * num / num
          rowItemNum.value = num;
          const bigS = x * 1 - 20;
          bigWidth.value = "calc(" + 100 / num + "% - " + bigS + "px)";
          rowRightWidth.value = 100 - 100 / num + "%";
          width.value = "calc(" + 100 / (num - 1) + "% - " + x + "px)"
        });
      });
      watch(() => rowItemNum.value, () => {
        change()
      });
      watch(() => props.itemList, () => {
        change()
      });
      return {
        bigItem,
        contentList,
        width,
        bigWidth,
        rowRightWidth,
        rowItemNum
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tabs-content:before {
    display: block;
    overflow: hidden;
    content: "";
  }
  .tabs-content {
    width: 100%;
    .tabs-tab-pane {
      -webkit-flex-shrink: 0;
      flex-shrink: 0;
      width: 100%;
      -webkit-backface-visibility: hidden;
      opacity: 1;
      -webkit-transition: opacity .45s;
      transition: opacity .45s;
      .g-row {
        text-align: left;
        overflow: auto;
        &::-webkit-scrollbar { width: 0 !important }
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
      }
      .g-row-right {
        white-space: nowrap;
        margin-left: 0;
        margin-right: 0;
        float: left;
      }
    }
  }
</style>
